Reactivity: setup関数の実装
ComponentOptions に setup を追加
code: packages/runtime-core/componentOptions.ts
export type ComponentOptions = {
render?: Function
setup?: () => Function // 追加!
}
追加した setup関数を使うように createAppApi を修正
code: packages/runtime-core/apiCreateApp.ts
export function createAppAPI<HostElement>(
render: RootRenderFunction<HostElement>,
): CreateAppFunction<HostElement> {
return function createApp(rootComponent) {
const app: App = {
mount(rootContainer: HostElement) {
const componentRender = rootComponent.setup!(); // setupを実行してrender関数を返してもらう
// ステートが変更された時にこれを実行するようにする
const updateComponent = () => {
const vnode = componentRender(); // render関数を実行してvnodeを取得
render(vnode, rootContainer);
};
updateComponent();
},
};
return app;
};
}
playgroundでsetup関数が使えるようになった!
code: examples/playground/main.ts
import { createApp, h } from 'chibivue'
const app = createApp({
setup() {
// state定義は今から実装する
// const state = reactive({ count: 0 })
return function render() {
return h('div', { id: 'my-app' }, [
h(
'button',
{
onClick() {
alert('Hello world!')
},
},
),
])
}
},
})
app.mount('#app')